<div class="content">
    <div id="example_title" style="max-width: 900px">
        <h1>Inline Columns</h1>
        To make it easier to work with more common use cases, there is an abstract field type: "columns". It allows to use auto generated forms with
        fields in any number of columns (users display: flex).
    </div>
    <div id="example_view">
        See <a href="http://w2ui.com/web/docs/w2form.fields" target="_blank">options</a> for more information
    </div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="form" style="width: 750px; height: 600px"></div>

<!--CODE-->
<script type="module">
import { w2form, query, w2ui, w2popup, w2alert, w2utils } from '__W2UI_PATH__'

let form = new w2form({
    box: '#form',
    name: 'form',
    header: 'Linked Lists',
    url: 'server/post',
    fields: [
        { field: 'field1', type: 'text',
            html: {
                group: 'Group A',
                label: 'First Field',
                span: -1,
                attr: 'style="width: 50%"',
                text: `
                    <div style="display: inline-block; margin-left: 10px">
                        %anchor_1%
                    </div>
                    <span style="font-size: 16px"> ← </span> anchored field
                `
            }
        },
        { field: 'field2', type: 'text',
            html: {
                label: 'Another Field',
                span: -1,
                anchor: '%anchor_1%',
                attr: 'style="width: 100%"'
            }
        },
        { type: 'html', html: `
            <div style="margin: 10px -5px 0px -5px; background-color: #fafafa; padding: 10px; font-size: 14px; color: #3988b9">
                Fields in columns are bleow
            </div>
            <div style="height: 15px"></div>`
        },
        { type: 'columns', columns: [
            { content: '%anchor_a1% %anchor_a2% %anchor_a3%', style: 'width: calc(50% + 8px)' },
            { content: '%anchor_b%', style: 'width: 50%; padding-left: 5px' }
        ]},
        { field: 'field3', type: 'text',
            html: {
                label: 'Field 3',
                span: -1,
                col_anchor: '%anchor_a1%',
                attr: 'style="width: 100%"'
            }
        },
        { field: 'field4', type: 'text',
            html: {
                label: 'Field 4',
                span: -1,
                col_anchor: '%anchor_a2%',
                attr: 'style="width: 100%"'
            }
        },
        { field: 'field5', type: 'text',
            html: {
                label: 'Field 5',
                span: -1,
                col_anchor: '%anchor_a3%',
                attr: 'style="width: 100%"'
            }
        },
        { field: 'field6', type: 'textarea',
            html: {
                label: 'Field 6',
                span: -1,
                col_anchor: '%anchor_b%',
                attr: 'style="width: 100%; height: 140px; resizable: none"'
            }
        },
        { type: 'columns', style: 'margin-top: 15px; padding: 10px 10px; background-color: #f0fbf2', columns: [
            { content: '%anchor_c1% %anchor_c2%', style: 'width: 30%' },
            { content: '%anchor_d1%', style: 'width: 30%' },
            { content: '%anchor_e1%', style: 'width: 30%; padding-left: 5px;' }
        ]},
        { field: 'date1', type: 'date', required: true,
            html: { label: 'Date 1', col_anchor: '%anchor_c1%', span: 2 }
        },
        { field: 'date2', type: 'date', required: true,
            html: { label: 'Date 2', col_anchor: '%anchor_c2%', span: 2 }
        },
        { field: 'comments', type: 'textarea',
            html: {
                col_anchor: '%anchor_d1%',
                span: 0,
                attr: 'placeholder="Comments..." style="width: 100%; height: 66px; resize: none;"'
            }
        },
        { field: 'list4',  type: 'checks', required: false,
            html: {
                label: 'Check List',
                span: 0,
                col_anchor: '%anchor_e1%',
                attr: 'style="max-width: 200px; max-height: 200px; overflow: auto"'
            },
            options: {
                items: [
                    { id: 'check1', text: 'Check 1' },
                    { id: 'check2', text: 'Check 2' },
                    { id: 'check3', text: 'Check 3 (long text)' },
                ]
            }
        },


    ],
    record: {
    },
    actions: {
        Reset(event) {
            this.clear();
        },
        Save(event) {
            if (w2ui.form.validate().length == 0) {
                w2popup.open({
                    title: 'Form Data',
                    with: 600,
                    height: 550,
                    body: `<pre>${JSON.stringify(this.getCleanRecord(), null, 4)}</pre>`,
                    actions: { Ok: w2popup.close }
                })
            }
        },
        custom: {
            text: '<span style="font-size: 16px">←</span> click to see data',
            class: 'custom-class',
            style: 'background-image: none; background-color: transparent; border: 0px; margin: 0 0 0 -10px;',
            onClick() {
                w2alert('Not me!! The other button')
            }
        }
    }
});
</script>
